<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";
import server from "../../config/server.js";

const columns = [
  {
    name: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Action',
    key: 'action',
  },
];
const data = ref([])
const loadData = () => {
  let url = `${server.apiBaseUrl}/zdppy_amstudent_student`
  axios({
    method: "get",
    url: url
  }).then(resp => {
    data.value = resp.data.data.results
  })
}

const onDeleteClick = (record) => {
  axios({
    method: "delete",
    url: `${server.apiBaseUrl}/zdppy_amstudent_student/` + record.id
  }).then(resp => {
    loadData()
    message.success("删除学生成功!")
  })
}

// count modal
const currentStudentId = ref(-1)
const courseCount = ref(0)
const openCount = ref(false);
const showCountModal = (record) => {
  currentStudentId.value = record.id
  console.log(currentStudentId.value)
  axios({
    method: "get",
    url: `${server.apiBaseUrl}/zdppy_amcountdown_num?pk_id=${currentStudentId.value}`,
  }).then(resp => {
    console.log(resp.data)
    if (resp.data.data && resp.data.data.results && resp.data.data.results.length === 0) {
      axios({
        method: "post",
        contentType: "application/json",
        url: `${server.apiBaseUrl}/zdppy_amcountdown_num`,
        data: {
          pk_id: currentStudentId.value,
          name: record.name,
          num: 0,
        }
      }).then(() => {
        message.success("初始化课时数量成功")
      })
    } else {
      const countNum = resp.data.data.results[0]
      console.log("xxx", countNum)
      courseCount.value = countNum.num
    }
  }).finally(() => {
    openCount.value = true;
  })
};
const handleCountOk = e => {
  openCount.value = false;
  if (courseCount.value < 0) {
    message.warning("课时数量不能小于0")
    courseCount.value = 0
    return
  }
  axios({
    method: "get",
    url: `${server.apiBaseUrl}/zdppy_amcountdown_num?pk_id=${currentStudentId.value}`,
  }).then(resp => {
    console.log(resp.data.data)
    const countNum = resp.data.data.results[0]
    console.log(countNum)
    axios({
      method: "put",
      contentType: "application/json",
      url: `${server.apiBaseUrl}/zdppy_amcountdown_num/${countNum.id}`,
      data: {
        num: courseCount.value
      }
    }).then(() => {
      message.success(("修改课时数量成功"))
    })
  })
};

onMounted(() => {
  loadData()
})
</script>

<template>
  <a-modal
      v-model:open="openCount"
      title="课时数量"
      @ok="handleCountOk">
    <a-input-number
        v-model:value="courseCount"
    />
  </a-modal>

  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'action'">
        <span>
          操作
        </span>
      </template>
      <template v-else>
        <span>
          {{ column.name }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space wrap>
          <a-button
              type="primary"
              size="small"
              @click="showCountModal(record)"
          >
            课时
          </a-button>

          <a-popconfirm
              title="您确定要删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onDeleteClick(record)"
          >
            <a-button
                type="primary"
                size="small"
                danger>
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>